<script setup>
import Article from './article/index.vue'
import Attention from './attention/index.vue'
import Collect from './collect/index.vue'
import Like from './like/index.vue'
import Ness from './ness/index.vue'

const activeName = ref('ness')
const userId = ref(1)

const nessRef = ref(null)
const articleRef = ref(null)
const collectRef = ref(null)
const attentionRef = ref(null)
const likeRef = ref(null)

function toggleTab(name) {
  activeName.value = name
}

defineExpose({
  // main页面中tab切换
  toggleTab,
  // 关注页面中子tab切换
  attentionToggleTab(id) {
    attentionRef.value?.toggleTag(id)
  },
})
</script>

<template>
  <AppCard bordered class="content-card">
    <el-tabs v-model="activeName">
      <el-tab-pane lazy label="动态" name="ness" class="">
        <Ness ref="nessRef" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane lazy label="文章" name="article">
        <Article ref="articleRef" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane lazy label="收藏集" name="collect">
        <Collect ref="collectRef" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane lazy label="关注" name="attention">
        <Attention ref="attentionRef" :user-id="userId" />
      </el-tab-pane>
      <el-tab-pane lazy label="赞" name="like">
        <Like ref="likeRef" :user-id="userId" />
      </el-tab-pane>
    </el-tabs>
  </AppCard>
</template>

<style scoped>
.content-card {
  margin-top: 20px;
  border-radius: 5px;
  padding: 8px;
}
</style>
